<template>
  <div id="recommend">
    <div class="item" v-for="(item,index) in recommends" :key="index">
      <a :href="item.link">
        <img :src="item.image" alt="">
        <span class="title">{{ item.title }}</span>
      </a>
    </div>

  </div>
</template>

<script scoped>
export default {
   name: 'Recommend',
   props: {
     recommends: {
       type: Array,
       default: []
     }
   }
}
</script>

<style lang='less' scoped>
  #recommend {
    width: 100%;
    display: flex;
    text-align: center;
    margin-top: 0.2rem;
    padding-bottom: 0.6rem;
    border-bottom: .2rem solid #eee;
    .item {
      flex: 1;
      img {
        width: 1.6rem;
        height: 1.6rem;
        margin-bottom: 0.2rem;
      }
      .title {
        display: block;
      }
    }
  }
</style>
